<template>
  <sub-view
    :title="orderMsgs"
    :back="back"
  >
    <template v-slot:menu v-if="user.state > 1">
      <van-icon name="ellipsis" size="18"  @click="showMenu = true"/>
      <van-action-sheet
        v-model="showMenu"
        :actions="menuActions"
        @select="onMenuSelect"
        cancel-text="取消"
        @cancel="showMenu = false"
        close-on-click-action
      />
    </template>
    <div class="detail">
      <order-form
        class="form"
        :sender="order.sender"
        :receiver="order.receiver"
        :isDetail="true"
      >
      </order-form>
      <div class="img">
        <van-image
          width="15rem"
          height="15rem"
          :src="orderUrl"
          @click="imgClick"
        >
          <template v-slot:loading>
            <van-loading type="spinner" size="5rem" />
          </template>
        </van-image>
      </div>
    </div>
  </sub-view>
</template>

<script>
import OrderForm from 'components/order-form/order-form'
import SubView from 'components/sub-view/sub-view'
import { getOrderDetail, setOrderState, watchReceiver, closeWR } from 'service/order'
import Order from 'classes/order'
import { ImagePreview } from 'vant'
import { __getUser } from 'common/js/user'

export default {
  name: 'order-detail',
  data () {
    return {
      order: new Order(),
      msgs: ['未处理', '运输中...', '待取件', '已取件'],
      user: __getUser(),
      showMenu: false,
      menuActions: [
        { name: '获取取件码', state: 4 },
        { name: '订单已送达', state: 3 },
        { name: '订单运输中', state: 2 },
        { name: '订单未处理', state: 1 }
      ]
    }
  },
  created () {
    this._initDetail()
  },
  activated () {
    this._initDetail()
  },
  computed: {
    orderUrl () {
      return 'http://qr.liantu.com/api.php?text=' + location.href
    },
    orderMsgs () {
      return this.msgs[this.order.state - 1]
    },
    receiverUrl () {
      return 'http://qr.liantu.com/api.php?text=' +
        location.origin + '/ipackage/list/receive?orderId=' +
        this.order.id
    }
  },
  methods: {
    _initDetail () {
      const id = this.$route.query.id
      getOrderDetail(id)
        .then((order) => {
          this.order = order
        })
        .catch(msg => {
          this.__failToast(msg)
          this.back()
        })
    },
    back () {
      this.$router.push({
        path: '/list'
      })
    },
    imgClick () {
      ImagePreview([this.orderUrl])
    },
    onMenuSelect (item) {
      if (item.state === 4) {
        this.showCode()
        return
      }
      this.order.state = item.state
      this.__loadToast('提交中...')
      setOrderState(this.order, item.state).then(() => {
        this.__successToast('操作成功')
        this.order.state = item.state
      }).catch(msg => {
        this.__failToast(msg)
      })
    },
    showCode () {
      const orderId = this.order.id
      const imgPre = ImagePreview({
        images: [this.receiverUrl],
        onClose () {
          closeWR(orderId)
        }
      })
      watchReceiver(orderId).then(() => {
        imgPre.close()
        this.order.state = 4
        this.__successToast('已收货！')
      }).catch(() => {})
    }
  },
  components: {
    OrderForm,
    SubView
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .form
    padding: 2rem 0
  .img
    display: block
    text-align: center
    padding-bottom: 4rem
</style>
